<template>
  <!-- 反馈详情 -->
  <el-dialog :title="dialogTitle" :visible.sync="visible" width="800px" top="5vh" append-to-body>
    <div style="margin-bottom: 24px">
      <div class="title-wrapper">
        <div class="title">{{ currentRow.quesTitle }}</div>
        <span class="title-time">{{ currentRow.quesUserName }} {{ currentRow.createTime }}</span>
      </div>
      <p style="font-size: 16px">{{ currentRow.quesDescribe }}</p>
    </div>
    <el-card v-for="(item, index) in replyList" class="box-card" shadow="hover" :key="'replyList' + index">
      <div slot="header" class="clearfix">
        <span v-if="item.replyType === '1'" style="font-size: 16px">回复内容</span>
        <span style="float: right; padding: 3px 0; color: #666666">{{ item.createBy }} {{ item.createTime }}</span>
      </div>
      <div>
        {{ item.replyDescribe }}
      </div>
    </el-card>
    <el-card v-if="replyData.quesStatus==='0'" shadow="never">
      <el-form label-position="top" ref="form" :model="replyForm" :rules="rules" label-width="80px">
        <el-form-item label="回复内容" prop="replyDescribe">
          <el-input rows="4" v-model="replyForm.replyDescribe" placeholder="请输入回复内容" type="textarea" />
        </el-form-item>
      </el-form>
    </el-card>
    <div slot="footer" class="dialog-footer">
      <el-button v-if="replyData.quesStatus==='0'" type="primary" @click="handleSubmit">提 交</el-button>
      <el-button v-if="replyData.quesStatus==='0'" type="danger" @click="handleIgnore">忽 略</el-button>
      <el-button v-if="replyData.quesStatus==='2'" type="danger" @click="handleCancelIgnore">取消忽略</el-button>
      <el-button @click="visible = false">返 回</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getFeedback, updateFeedback } from '@/api/problem/feedback'
const statusArray = ['待回复', '已回复', '已忽略']
export default {
  props: ['currentRow'],
  data() {
    return {
      dialogTitle: '问题反馈详情',
      // 遮罩层
      visible: false,
      replyData: {},
      replyList: [],
      // 表单
      replyForm: {
        replyDescribe: undefined,
      },
      // 表单校验
      rules: {
        replyDescribe: [{ required: true, message: '回复内容不能为空', trigger: 'blur' }],
      },
    }
  },
  methods: {
    // 显示弹框
    show() {
      this.dialogTitle = statusArray[this.currentRow.quesStatus] || '问题反馈详情'
      this.getDetails()
      this.visible = true
    },
    getDetails() {
      if (!this.currentRow.quesId) return
      getFeedback(this.currentRow.quesId).then((res) => {
        if (res.code === 200) {
          this.replyData = res.data
          this.replyList = res.data.sysQuestionFeedbackReplyList || []
        }
      })
    },
    requestOperateReply(isSubmit, quesStatus) {
      const params = {
        quesId: this.currentRow.quesId,
        quesStatus: quesStatus,
      }
      if (isSubmit) {
        params.sysQuestionFeedbackReplyList = [
          {
            replyDescribe: this.replyForm.replyDescribe,
            replyType: '1',
          },
        ]
      }
      updateFeedback(params).then((res) => {
        this.msgSuccess(res.msg)
        if (res.code === 200) {
          this.visible = false;
          this.$emit("ok");
        }
      })
    },
    /* 提交 */
    handleSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.requestOperateReply(true, '1');
        }
      })
    },
    /* 忽略 */
    handleIgnore() {
      this.requestOperateReply(false, '2');
    },

    /* 取消忽略 */
    handleCancelIgnore() {
      this.requestOperateReply(false, '0');
    },
  },
}
</script>
<style scoped lang="scss">
.title-wrapper {
  margin-top: -20px;
  margin-bottom: 16px;
  justify-content: center;
  display: flex;
  align-items: center;
  .title {
    font-size: 24px;
    color: #333333;
  }
  .title-time {
    position: absolute;
    right: 24px;
    color: #666666;
  }
}
.box-card {
  margin: 10px 0 20px;
}
</style>
